<template>
    <div>
        <el-tree :data="tableList" :props="defaultProps" :default-expand-all="true" node-key="id"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                    <el-button type="success" size="mini" @click="() => append(data)">添加子类</el-button>
                    <el-button type="primary" size="mini" @click="() => app(node, data)">修改</el-button>
                    <el-button type="danger" size="mini" @click="() => remove(data.id)">删除</el-button>
                </span>
            </span>
        </el-tree>
    </div>
</template>

<script>
import { getParentIdList, addBuil } from '@/api/buildingid'
export default {
    props: {
        tableList: {
            type: Array,
            default: () => []
        },
        dialogVisible: {
            type: Boolean,
            default: () => { }
        }
    },
    data() {
        return {
            data: [],
            defaultProps: {
                label: 'name',
                children: 'children'
            },
            selectedid: [],
        };
    },
    methods: {
        append(data) {
            //根据当前id的pid 往上追踪 直到追到pid为0 则停止
            console.log(data);
            // let { id } = data
            // let arr = getParentIdList(this.tableList, id)
            // this.form.name = arr[arr.length - 1]
            this.$store.commit("building/setid",data.id)
            this.$emit('isclose', true)
        },
    }

}
</script>

<style lang="less" scoped>
.el-input {
    width: 200px;
    margin-right: 20px;
}

.custom-tree-node {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
}

.el-tree {
    margin: 40px 0 0 20px;
}

/deep/.el-tree-node__content {
    height: 50px;
}

.el-button {
    height: 30px;
    // font-size: 16px
}
</style>